<template>
  <div class="auxiliarys-box" v-if="list.length > 0" :style="{ background: props.imgBackground }">
    <div v-for="item in list" :key="item.id">
      <div class="auxiliarys-box-item" v-if="!item.coverUrl">
        <span class="auxiliarys-box-title">{{ item.name }}</span>
        <span class="auxiliarys-box-subtitle" v-if="item.subTitle">——{{ item.subTitle }}</span>
        <div class="description-box" v-if="item.description">
          <textMax size="18px" color="rgba(51, 51, 51, 1)" :id="item.id" :data="item.description" :maxLen="256" />
        </div>
        <!-- <playImg :cover="item.coverUrl" /> -->
      </div>
      <div v-else class="auxiliarys-box-item" style="flex-direction: row">
        <div class="auxiliarys-box-else">
          <div class="auxiliarys-box-title">{{ item.name }}</div>
          <div class="auxiliarys-box-subtitle" v-if="item.subTitle">——{{ item.subTitle }}</div>
          <div class="description-box" v-if="item.description">
            <textMax size="18px" color="rgba(51, 51, 51, 1)" :id="item.id" :data="item.description" :maxLen="256" />
          </div>
        </div>
        <!-- <playImg :cover="item.coverUrl" /> -->
        <!-- <img
          :src="$filters.getLinkUrl(item.coverUrl + '?imageView2/2/w/356/h/356/format/webp')"
          alt=""
          class="auxiliarys-coverUrl"
        /> -->
        <div>
          <div class="tdesign-demo-image-viewer__base">
            <t-image-viewer :images="[$filters.getLinkUrl(item.coverUrl) + '?imageView2/2/format/webp']">
              <template #trigger="{ open }">
                <div class="tdesign-demo-image-viewer__ui-image">
                  <img
                    @click="open" 
                    alt="test"
                    :src="$filters.getLinkUrl(item.coverUrl + '?imageView2/3/w/356/h/356/format/webp')"
                    class="tdesign-demo-image-viewer__ui-image--img auxiliarys-coverUrl t-image--fit-cover t-image--position-center"
                  />
                </div>
              </template>
            </t-image-viewer>
          </div>
        </div>
      </div>
      <div class="video-box" v-if="item.video && item.video.url">
        <playVideo :name="item.video.name" :url="item.video.url" />
      </div>
      <div class="audio-box" v-if="item.audio && item.audio.url" :class="'audio' + store.styleInfo.colorType">
        <playAudio
          :name="item.audio.name"
          :url="item.audio.url"
          :nameColor="store.styleInfo.shmentColor"
          :iconColor="store.styleInfo.shmentColor"
          :timeColor="store.styleInfo.shmentColor"
          :background="store.styleInfo.background"
        />
      </div>
      <div class="exhibits-box" v-if="item.showpieces.length == 1">
        <div
          class="exhibits-item"
          v-for="(items, indexs) in item.showpieces"
          :key="items.id"
          :class="{ 'item-mg': indexs !== 0 }"
          @click="pathExhibits(item.id, items.id)"
        >
          <img
            :style="{ background: props.exhibitBackground }"
            :src="$filters.getLinkUrl(items.coverUrl, '?imageView2/2/h/441/w/382/format/webp')"
            class="img-box t-image--fit-contain t-image--position-center"
          />
          <div class="exhibits-item-right">
            <div class="exhibits-item-right-top">
              <div class="right-top-name-parent">
                <span class="exhibits-item-right-top-name">
                  {{ items.name }}
                </span>
              </div>
              <!-- <i class="iconfonts" @click="pathExhibits(item.id, items.id)"> &#xe6af; </i> -->
            </div>
            <t-row :gutter="24">
              <t-col class="exhibit-left">所属年代 </t-col>
              <t-col> {{ items.concreteTimes }}</t-col>
            </t-row>
            <t-row :gutter="24">
              <t-col class="exhibit-left">展品质地 </t-col>
              <t-col> {{ items.texture }}</t-col>
            </t-row>
            <t-row :gutter="24">
              <t-col class="exhibit-left">展品尺寸 </t-col>
              <t-col> {{ items.size }}</t-col>
            </t-row>
            <div class="exhibits-item-right-description">
              <span>{{ items.description ? items.description : '暂无描述' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="exhibits-box2" v-if="item.showpieces.length == 2">
        <div class="exhibits-item2" v-for="(items, indexs) in item.showpieces" :key="items.id">
          <img
            :style="{ background: props.exhibitBackground }"
            :src="$filters.getLinkUrl(items.coverUrl, '?imageView2/2/h/480/w/315/format/webp')"
            class="img-box t-image--fit-contain t-image--position-center"
            @click="pathExhibits(item.id, items.id)"
          />
          <div class="exhibits-item2-name">{{ items.name }}</div>
        </div>
      </div>
      <div class="exhibits-box2" v-if="item.showpieces.length >= 3">
        <div
          v-if="item.showpieces.length > 3"
          :style="{ background: props.exhibitBackground, opacity: !item.current ? 0.3 : 1 }"
          class="icon-box"
          @click="addCurrent(item, -3)"
        >
          <arrowLeft></arrowLeft>
        </div>
        <div class="center-exhibit">
          <div :id="'exhibits' + item.id" style="transition: all 0.3s">
            <div class="exhibits-item3" v-for="(items, indexs) in item.showpieces" :key="items.id">
              <img
                :style="{ background: props.exhibitBackground }"
                :src="$filters.getLinkUrl(items.coverUrl, '?imageView2/2/h/260/w/260/format/webp')"
                class="img-box t-image--fit-cover t-image--position-center"
                @click="pathExhibits(item.id, items.id)"
              />
              <div class="exhibits-item2-name">{{ items.name }}</div>
            </div>
          </div>
        </div>
        <div
          v-if="item.showpieces.length > 3"
          :style="{
            background: props.exhibitBackground,
            opacity: item.current === item.showpieces.length - 2 ? 0.3 : 1,
          }"
          class="icon-box"
          @click="addCurrent(item, 3)"
        >
          <arrowRight></arrowRight>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { useRouter, useRoute } from 'vue-router';
import { auxiliarysList } from '@/api/templates/templates';
import { useProjectStore } from '@/store';
import { ref, watch, nextTick } from 'vue';
import textMax from './textMax.vue';
import playAudio from '@/components/templatePlay/auxiliarysAudio.vue';
import playVideo from '@/components/templatePlay/video.vue';
import playImg from '@/components/templatePlay/image.vue';
import { urls } from '@/utils/request/upload';
import arrowLeft from '../arrowLeft.vue';
import arrowRight from '../arrowRight.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { BrowseIcon } from 'tdesign-icons-vue-next';
const emit = defineEmits(['emitExhibits']);
const props = defineProps({
  moduleId: {
    type: Number,
  },
  titleColor: {
    type: String,
    default: '#333333',
  },
  maxLen: {
    type: Number,
    default: 80,
  },
  imgBackground: {
    type: String,
    default: '#F0F3F6',
  },
  exhibitBackground: {
    type: String,
    default: '#F0F3F6',
  },
  subtitleColor: {
    type: String,
    default: 'rgba(51, 51, 51, 1)',
  },
  flag: {
    type: Boolean,
    default: true,
  },
});
const list = ref([]);
const store = useProjectStore();
const router = useRouter();
const route = useRoute();

const pathExhibits = (moduleId: number, showpieceid: number) => {
  emit('emitExhibits', moduleId, showpieceid);
};
const init = async () => {
  try {
    let res = await auxiliarysList(localStorage.getItem('projectId'), props.moduleId, {
      c: route.meta.loopType ? 1 : 0,
    });
    list.value = res.data;
    // nextTick(() => {
    //   var dom = document.getElementById('tem1-heard-item');

    //   if (props.flag) {
    //     dom.scrollIntoView();
    //     const ele = document.getElementById('tem1-heard-item'); // 获取元素
    //     const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
    //     window.scrollTo({
    //       top: top,
    //     });
    //   }
    // });
  } catch (err) {}
};
const addCurrent = (item: any, num: number) => {
  // //console.log(item.currentWidth);
  if (!item.current) {
    item.current = 0;
  }
  if (!item.currentWidth) {
    item.currentWidth = 0;
  }
  if (item.current === 0 && num < 0) {
    MessagePlugin.warning('暂无上一个展品');
    return;
  }

  // //console.log(item.current, item.showpieces.length);
  if (item.current === item.showpieces.length - 2 && num > 0) {
    MessagePlugin.warning('暂无下一个展品');
    return;
  }
  item.current += num;
  //console.log(item.current);

  item.currentWidth += -296 * num;
  //console.log(item.current);
  var imgItemImage = document.getElementById(`exhibits${item.id}`);

  imgItemImage.style.transform = `translateX(${item.currentWidth}px)`;
};
init();
watch(
  () => props.moduleId,
  () => {
    init();
  },
  { deep: true },
);
</script>

<style scoped lang="less">
.auxiliarys-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  // padding-top: 50px;
  margin-top: 50px;
  padding-bottom: 50px;
  // margin-bottom: 80px;
  > div {
    width: 1180px;
    margin: auto;
    margin-top: 50px;
  }
}
.auxiliarys-box-item {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  // align-items: center;
  width: 1180px;
  margin: auto;
  margin-top: 8px;
}

.auxiliarys-box-title {
  // font-family: SourceBold;
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 10px;
  text-align: center;
}
.auxiliarys-box-subtitle {
  // font-family: SourceHanSerifCN;
  font-size: 16px;
  line-height: 32px;
  margin-bottom: 26px;
  text-align: center;
}

:deep(.bbb) {
  font-size: 18px !important;
}
.description-box {
  margin-bottom: 26px;
  text-align: justify;
}
.content-text-heard {
  :deep(span) {
    font-size: 18px !important;
  }
}
.video-box {
  // height: 356px;
  margin-top: 26px;
}
.audio-box {
  margin-top: 26px;
}
:deep(.t-slider__rail) {
  height: 2px;
}
:deep(.t-slider__button) {
  width: 10px;
  height: 10px;
  background: rgba(38, 41, 51, 1);
  border: none;
}
:deep(.t-slider__button:hover) {
  width: 12px;
  height: 12px;
  background: rgba(38, 41, 51, 1);
  border: none;
}
:deep(.t-slider__track) {
  height: 2px;
  background: rgba(38, 41, 51, 1);
}
.exhibits-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 50px;
  margin-top: 26px;
}
.exhibits-item {
  display: flex;
  width: 100%;
  height: 382px;
  cursor: pointer;
  .img-box {
    width: 441px;
    height: 382px;
  }
}
.exhibits-item-right {
  display: flex;
  flex-direction: column;
  width: calc(100% - 300px);
  padding: 0px 40px;
  height: 100%;
}
.exhibits-item-right-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  // margin-bottom: 24px;
}
.right-top-name-parent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exhibits-item-right-top-name {
  // font-family: SourceHanSerifCN;
  width: 100%;
  font-size: 22px;
  line-height: 34px;
  color: #333;
}
.iconfonts {
  cursor: pointer;
  font-size: 24px;
  color: #333;
}
.exhibits-item-right-description {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; /* 这里是超出几行省略 */
  overflow: hidden;
  margin-top: 26px;
  text-align: justify;
  span {
    // font-family: SourceHanSerifCN;
    font-size: 16px;
    // font-weight: 500;
    line-height: 30px;
    color: #666666;
    text-align: justify;
  }
}
.item-mg {
  margin-top: 20px;
}
:deep(.d-slider .d-slider__runway .d-slider__preload) {
  background: rgba(255, 255, 255, 0.81);
}
.auxiliarys-coverUrl {
  width: 356px; 
  height: 356px;  
  border-radius: 50%;
  margin-left: 34px;
  cursor: pointer;
}
.t-row {
  margin-top: 26px;
  margin-bottom: 0;
  color: #333;
  // font-family: SourceHanSerifCN;
  font-size: 16px;
  font-style: normal;
  // font-weight: 500;
  line-height: 24px; /* 150% */
}
.exhibit-left {
  color: #999;
  text-align: center;
  // font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
}
.exhibits-box2 {
  display: flex;
  width: 1180px;
  justify-content: space-between;
  margin-top: 26px;
  .exhibits-item2 {
    width: 480px;
    // height: 480px;
    cursor: pointer;

    .img-box {
      width: 480px;
      height: 315px;
    }
  }
  .exhibits-item2-name {
    color: #333;
    text-align: center;
    // font-family: SourceHanSerifCN;
    font-size: 18px;
    font-style: normal;
    // font-weight: 500;
    line-height: 28px; /* 155.556% */
  }
}
.exhibits-item3 {
  overflow: hidden;
  cursor: pointer;
  margin-right: 36px;
  flex-shrink: 0;
  width: 260px;
  height: 260px;
  .img-box {
    width: 260px;
    height: 260px;
    border-radius: 50%;
  }
}
.center-exhibit {
  width: 860px;

  margin: auto;
  margin-bottom: 50px;
  overflow: hidden;
  > div {
    display: flex;
  }
}

.icon-box {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-top: 114px;
  cursor: pointer;
  :deep(.iconfonts) {
    color: #fff !important;
    font-size: 20px !important;
  }
}
.auxiliarys-box-else {
  flex: 1;
}
.audio1 {
  :deep(.t-slider__rail) {
    background: rgba(170, 170, 170, 0.2);
  }
  :deep(.t-slider__track) {
    background: #d2ad77;
  }
  :deep(.t-slider__button) {
    background: #d2ad77;
    border: 2px solid #d2ad77;
  }
}
.audio2 {
  :deep(.t-slider__rail) {
    background: rgba(170, 170, 170, 0.2);
  }
  :deep(.t-slider__track) {
    background: #133889;
  }
  :deep(.t-slider__button) {
    background: #133889;
    border: 2px solid #133889;
  }
}
.audio3 {
  :deep(.t-slider__rail) {
    background: rgba(170, 170, 170, 0.2);
  }
  :deep(.t-slider__track) {
    background: #ab1d22;
  }
  :deep(.t-slider__button) {
    background: #ab1d22;
    border: 2px solid #ab1d22;
  }
}
.audio4 {
  :deep(.t-slider__rail) {
    background: rgba(170, 170, 170, 0.2);
  }
  :deep(.t-slider__track) {
    background: #3f4d4f;
  }
  :deep(.t-slider__button) {
    background: #3f4d4f;
    border: 2px solid #3f4d4f;
  }
}
.audio5 {
  :deep(.t-slider__rail) {
    background: rgba(170, 170, 170, 0.2);
  }
  :deep(.t-slider__track) {
    background: #949494;
  }
  :deep(.t-slider__button) {
    background: #949494;
    border: 2px solid #949494;
  }
}
:deep(.t-slider__button) {
  box-shadow: 0 0 0 0 !important;
}
:deep(.t-slider__button--dragging) {
  box-shadow: 0 0 0 0 !important;
}
</style>
